<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content pd">
      <mh-header headName="注销账户"> </mh-header>
      <div class="set-form">
        <div class="tab-con">
          <textarea class="area" placeholder="请输入注销感言" v-model='content'></textarea>
          <div class="mui-content-padded">
            <button type="button" class="mui-btn-block mh-btn" @click='submit'>提交申请</button>
          </div>
        </div>

      </div>

    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header';
  import {MH_API} from "@/api/api";
  export default {
    name: "setting",
    data () {
      return {
        type: 1,
        content: ''
      }
    },
    methods: {
      getTab(type){
        this.type = type;
      },
      submit(){
        let self = this;
        if(!self.content){
          mui.toast('请输入注销感言');
          return false
        }
        MH_API.applyCancel({
          content: self.content
        }).then(res => {
          if (res.status === 200) {
            mui.toast('注销申请已提交')
          }
          else{
            mui.toast(res.msg)
          }
        })
      },
      contact(){

      }
    },
    components: {
      MhHeader
    }
  }
</script>

<style scoped>
  .set-form{ display: block; background-color: #fff; }
  .tab-tit{ display: block; border-bottom: 1px solid #F8F8F8; line-height: 4rem; text-align: center;}
  .tab-tit span{ display: inline-block; font-size: 1.4rem; color: #B0B0B0; margin: 0 2rem;}
  .tab-tit span.cur{ color: #EB537F; border-bottom: 1px solid #EB537F;}
  .tab-con{ display: block; padding: 2rem 3rem; }
  .tab-con .area{ display: block; border: 1px solid #F8F8F8; padding: 0.5rem; min-height: 15rem;}
  .tab-con .mui-content-padded{ margin-top: 10rem; }
  .tab-img{ display: block; text-align: center;}
  .tab-img img{ display: block; height: 12.1rem; margin: 0 auto; }

  .tab-info{ display: block; font-size: 1.4rem; }
  .tab-info .tit{ display: block; color: #999; margin-bottom: 1rem;}
  .tab-info ul{ display: block; margin-bottom: 1rem; border-bottom: 1px solid #eee; padding-bottom: 1rem; overflow: hidden; }
  .tab-info li{ display: block; overflow: hidden; margin-bottom: 0.3rem;}
  .tab-info li span{ float: left; width: 7.5rem; }
  .tab-info li input{ width: 24rem; border:1px solid #eee; height: 3rem; line-height: 3rem; }
  .other{ display: block; margin-top: 1rem; color: #666; }
  .other input{ margin-top: 0.5rem; width: 32rem; border:1px solid #eee; height: 3rem; line-height: 3rem;}

  .input-file{ width: 10rem; height: 10rem; display: inline-block; margin-right: 0.5rem; background-color: #eee; line-height: 10rem; text-align: center; position: relative; }
  .input-file span{ font-size: 3rem; color: #999; }
  .input-file input{ opacity: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 100; }

  .my-contact{ display: block; border-top: 1px solid #eee; margin-top: 1rem; padding-top: 1rem; line-height: 3rem; }
  .my-contact input{ width: 22rem; border:1px solid #eee; height: 3rem; line-height: 3rem;}
</style>
